<template>
  <div class="box">
    <h5>猜你喜欢</h5>
    <div class="nav">
      <p>综合排序↓</p>
      <p>距离最近</p>
      <p>销量最高</p>
      <p>筛选</p>
    </div>
    <div class="tuijian">
      <div>年货节热卖</div>
      <div>津贴联盟</div>
      <div>满减优惠</div>
      <div>品质联盟</div>
    </div>
    <div class="list">
      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="left">
          <div class="tu"></div>
        </div>
        <div class="right">
          <h5>{{ item.name }}</h5>
          <div class="fankui">
            <span class="pingfen">⭐{{ item.pingfen }}</span>
            <span class="xiaoliang">月售{{ item.xiaoliang }}</span>
          </div>
          <div class="peisong">
            <span>起送￥{{ item.peisong }}</span>
            <div class="you">
              <span>{{ item.time }}分钟</span>
              <span>{{ item.juli }}</span>
            </div>
          </div>
          <div class="pingjia">
            <span>{{ item.pingjia }}</span>
            <span>{{ item.pingjia }}</span>
          </div>
          <div class="youhuiquan">
            <span>{{ item.youhuiquan }}</span>
            <span>70减35</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import logo from "../../img/pic.png";
export default {
  data() {
    return {
      list: [
        {
          name: "金百万烤鸭（苏家坨店）",
          pingfen: 4.3,
          xiaoliang: 1632,
          peisong: 20,
          time: 47,
          juli: "3.9km",
          pingjia: "扬州炒饭很好吃",
          youhuiquan: "35减12",
        },
        {
          name: "稻香金源饺子馆",
          pingfen: 4.3,
          xiaoliang: 1632,
          peisong: 20,
          time: 47,
          juli: "3.9km",
          youhuiquan: "35减12",
        },
      ],
    };
  },
};
</script>

<style scoped>
.box {
  margin: 10px;
}
.box h5 {
  font-size: 15px;
}
.box .nav {
  margin: 10px 0;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
}
.box .tuijian {
  display: flex;
  justify-content: space-between;
}
.box .tuijian div {
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  background-color: rgb(229, 229, 231);
}
.list {
  margin-top: 15px;
}

.list .item {
  display: flex;
  margin-bottom: 20px;
}
.list .item .left .tu {
  width: 80px;
  height: 80px;
  background-color: pink;
}
.list .item .right {
  margin-left: 10px;
  flex: 1;
}
.list .item .right h5 {
  font-size: 14px;
}
.list .item .right .fankui {
  margin-top: 10px;
  font-size: 12px;
  color: gray;
}
.list .item .right .peisong {
  font-size: 12px;
  margin-top: 5px;
  color: gray;
}
.list .item .right .peisong .you {
  float: right;
}
.list .item .right .pingjia,
.youhuiquan {
  font-size: 12px;
  margin-top: 10px;
}
.list .item .right .pingjia span {
  background-color: beige;
  margin-right: 8px;
  padding: 0 2px;
  box-sizing: border-box;
  border-radius: 2px;
  color: rgb(251, 65, 65);
}
.list .item .right .youhuiquan span {
  margin-right: 8px;
  color: rgb(251, 84, 84);
  border-radius: 2px;

  border: 1px solid red;
}
</style>